import React, { PropTypes } from 'react';
import { Breadcrumb,Tree,Table } from 'antd';
const TreeNode = Tree.TreeNode;

import { connect } from 'react-redux'
import { showMask } from '../../action/mask';

import MemberEdit from '../window/member/MemberEdit';

import '../less/userCenter.less';

class MemberClassify extends React.Component {
  static contextTypes = {
    className: React.PropTypes.string,
  };

  static defaultProps = {
    className: 'queue-demo',
  };

  constructor() {
    super();
    this.state = {
        dataSource:[{
          key:'1',
          text:'冠江集团',
          children:[{
            key:'11',
            text:'集团高管',
            children:[]
          },{
            key:'12',
            text:'财务管理中心',
            children:[{
              key:'121',
              text:'财务管理中心1',
              children:[]
            },{
              key:'122',
              text:'财务管理中心1',
              children:[]
            }]
          }]
        },{
          key:'2',
          text:'集团个管理委员会',
          children:[{
            key:'21',
            text:'集团个管理委员会1',
            children:[]
          },{
            key:'22',
            text:'集团个管理委员会2',
            children:[]
          }]
        },{
          key:'3',
          text:'其他',
          children:[{
            key:'31',
            text:'其他1',
            children:[]
          },{
            key:'32',
            text:'其他2',
            children:[]
          }]
        }]
    };
  }
  componentDidMount() {
    this.props.showMask(<MemberEdit />);
  }
  _showUser(record,index){

  }
  render() {
    const loop = data => data.map((item) => {
      if (item.children && item.children.length>0) {
        return <TreeNode key={item.key} title={item.text}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.text} />;
    });
    let _compent = loop(this.state.dataSource);
    return (
        <div className="containerConten">
          <div className="ucHead">
            <Breadcrumb>
              <Breadcrumb.Item>用户管理</Breadcrumb.Item>
              <Breadcrumb.Item>员工中心</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className="ucContent">
            <div className="ucLeft">
                  <div className="ucGroupName">
                      <img src={require('../../assets/group.png')} />
                      <span>组织机构</span>
                  </div>
                  <div className="ucGroupTree">
                      <Tree
                        defaultExpandedKeys={this.state.expandedKeys}
                        onDragEnter={this.onDragEnter}
                        onDrop={this.onDrop}
                      >
                        {_compent}
                      </Tree>
                  </div>
            </div>
          </div>
        </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    maskStatus: state.mask.maskStatus
  }
}

export default connect(
  mapStateToProps,
  { showMask }
)(MemberClassify)
